<template>
  <div class="admin-dashboard">
    
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-card>
          <template #header>用户注册趋势</template>
          <div id="user-registration-chart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>课程类别分布</template>
          <div id="course-category-chart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>讲师授课数量</template>
          <div id="teacher-courses-chart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>学习进度分布</template>
          <div id="learning-progress-chart" style="width: 100%; height: 300px;"></div>
        </el-card>
      </el-col>
    </el-row>

  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';

// ECharts 实例
let userRegistrationChart = null;
let courseCategoryChart = null;
let teacherCoursesChart = null;
let learningProgressChart = null;

onMounted(() => {
  initUserRegistrationChart();
  initCourseCategoryChart();
  initTeacherCoursesChart();
  initLearningProgressChart();
});

// 高科技主题颜色
const technoColors = ['#00f2f1', '#f7b731', '#ff6b6b', '#eb4d4b', '#2d98da', '#a55eea', '#fed330'];

// 初始化用户注册趋势折线图 (高科技风格)
const initUserRegistrationChart = () => {
  const chartDom = document.getElementById('user-registration-chart');
  if (chartDom) {
    userRegistrationChart = echarts.init(chartDom, 'dark'); // 使用暗黑主题
    const option = {
      backgroundColor: '#1c2438', // 深色背景
      title: {
        text: '用户注册趋势',
        left: 'center',
        textStyle: { color: '#fff' } // 标题颜色
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'cross' },
        backgroundColor: 'rgba(0, 0, 0, 0.6)', // 提示框背景
        borderColor: technoColors[0],
        textStyle: { color: '#fff' }
      },
      xAxis: {
        type: 'category',
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
        axisLabel: { color: '#fff' }, // 坐标轴文字颜色
        axisLine: { lineStyle: { color: technoColors[0] } } // 坐标轴线条颜色
      },
      yAxis: {
        type: 'value',
        axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: technoColors[0] } },
        splitLine: { lineStyle: { color: '#3a3a3a' } } // 分割线颜色
      },
      series: [{
        name: '注册人数',
        type: 'line',
        smooth: true, // 平滑曲线
        lineStyle: { color: technoColors[0] }, // 线条颜色
        itemStyle: { borderColor: technoColors[0] }, // 数据点边框颜色
        areaStyle: { // 区域填充
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
            offset: 0,
            color: 'rgba(0, 242, 241, 0.3)' // 渐变起始颜色
          }, {
            offset: 1,
            color: 'rgba(0, 242, 241, 0)' // 渐变结束颜色
          }])
        },
        data: [120, 180, 150, 200, 250, 220, 280]
      }]
    };
    userRegistrationChart.setOption(option);
  }
};

// 初始化课程类别分布饼图 (高科技风格)
const initCourseCategoryChart = () => {
  const chartDom = document.getElementById('course-category-chart');
  if (chartDom) {
    courseCategoryChart = echarts.init(chartDom, 'dark');
    const option = {
       backgroundColor: '#1c2438',
      title: {
        text: '课程类别分布',
        left: 'center',
        textStyle: { color: '#fff' }
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        borderColor: technoColors[1],
        textStyle: { color: '#fff' }
      },
      legend: {
        orient: 'vertical',
        left: 'left',
        data: ['编程', '设计', '语言', '数据分析', '市场营销'],
        textStyle: { color: '#fff' }
      },
      series: [
        {
          name: '课程数量',
          type: 'pie',
          radius: '50%',
          data: [
            {value: 335, name: '编程'},
            {value: 310, name: '设计'},
            {value: 234, name: '语言'},
            {value: 135, name: '数据分析'},
            {value: 1548, name: '市场营销'}
          ],
          emphasis: {
            itemStyle: {
              shadowBlur: 10,
              shadowOffsetx: 0,
              shadowColor: 'rgba(0, 0, 0, 0.5)'
            }
          },
          label: { color: '#fff' }, // 标签颜色
          itemStyle: { // 饼图颜色
             color: (params) => { return technoColors[params.dataIndex % technoColors.length]; }
          }
        }
      ]
    };
    courseCategoryChart.setOption(option);
  }
};

// 初始化讲师授课数量柱状图 (高科技风格)
const initTeacherCoursesChart = () => {
  const chartDom = document.getElementById('teacher-courses-chart');
  if (chartDom) {
    teacherCoursesChart = echarts.init(chartDom, 'dark');
    const option = {
       backgroundColor: '#1c2438',
      title: {
        text: '讲师授课数量',
        left: 'center',
        textStyle: { color: '#fff' }
      },
      tooltip: {
        trigger: 'axis',
         axisPointer: { type: 'shadow' }, // 阴影指示器
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        borderColor: technoColors[2],
        textStyle: { color: '#fff' }
      },
      xAxis: {
        type: 'category',
        data: ['讲师A', '讲师B', '讲师C', '讲师D', '讲师E'],
         axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: technoColors[2] } }
      },
      yAxis: {
        type: 'value',
         axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: technoColors[2] } },
        splitLine: { lineStyle: { color: '#3a3a3a' } }
      },
      series: [{
        name: '授课数量',
        type: 'bar',
        data: [15, 12, 8, 10, 14],
         itemStyle: { // 柱状图颜色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: technoColors[2]}, // 渐变起始颜色
                {offset: 1, color: 'rgba(0,0,0,0)'} // 渐变结束颜色
            ])
         }
      }]
    };
    teacherCoursesChart.setOption(option);
  }
};

// 初始化学习进度分布图 (高科技风格)
const initLearningProgressChart = () => {
  const chartDom = document.getElementById('learning-progress-chart');
  if (chartDom) {
    learningProgressChart = echarts.init(chartDom, 'dark');
    const option = {
       backgroundColor: '#1c2438',
      title: {
        text: '学习进度分布',
        left: 'center',
        textStyle: { color: '#fff' }
      },
      tooltip: {
        trigger: 'axis',
         axisPointer: { type: 'shadow' },
        backgroundColor: 'rgba(0, 0, 0, 0.6)',
        borderColor: technoColors[3],
        textStyle: { color: '#fff' }
      },
      xAxis: {
        type: 'category',
        data: ['未开始', '学习中', '已完成'],
         axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: technoColors[3] } }
      },
      yAxis: {
        type: 'value',
         axisLabel: { color: '#fff' },
        axisLine: { lineStyle: { color: technoColors[3] } },
        splitLine: { lineStyle: { color: '#3a3a3a' } }
      },
      series: [{
        name: '用户数',
        type: 'bar',
        data: [500, 800, 1200],
         itemStyle: { // 柱状图颜色
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                {offset: 0, color: technoColors[3]},
                {offset: 1, color: 'rgba(0,0,0,0)'}
            ])
         }
      }]
    };
    learningProgressChart.setOption(option);
  }
};

</script>

<style scoped>
.admin-dashboard {
  padding: 20px;
   background-color: #1c2438; /* 设置页面背景 */
}

.el-row {
  margin-bottom: 20px;
}

.el-row:last-child {
  margin-bottom: 0;
}

.el-col {
  border-radius: 4px;
}

.el-card {
    background-color: #2a334a; /* 卡片背景 */
    border: 1px solid #444; /* 卡片边框 */
    color: #fff; /* 文字颜色 */
}

.el-card :deep(.el-card__header) {
    border-bottom: 1px solid #444; /* 卡片头部边框 */
    color: #00f2f1; /* 头部文字颜色 */
    font-size: 16px;
}
</style> 